<template>
  <!-- v-theme 自定义指定在main.js中设置 -->
  <div
    id="show-blog"
    v-theme:cloumn="'narrow'"
  >
    <h1>博客总览</h1>
    <input
      type="text"
      placeholder="搜索"
      v-model="search"
    >
    <div
      class="single-blog"
      v-for="blog in filteredBlogs"
      :key="blog.id"
    >
      <!-- 有了搜索功能后就不能再遍历data里的属性不然不会触发计算属性 -->
      <!-- <div class="single-blog" v-for="blog in filteredBlogs" :key="blog.id"> -->
      <!--如果是带了参数to前面一定要加上v-bind,  blog.id为请求过来的id-->
      <router-link v-bind:to="'/singleBlog/'+blog.id">
        <h2>{{blog.title}}</h2>
        <article>
          <!-- snippet 自定义过滤方法(main.js) -->
          {{blog.content | snippet}}
        </article>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: "show-blogs",
  data() {
    return {
      blogs: [],
      search: ""
    };
  },
  created() {
    this.$axios
      .get("https://wd4254457889oggbip.wilddogio.com/posts.json")
      .then(data => {
        let datas = data.data;
        var blogsArray = [];
        for (let key in datas) {
          //key 健  data 值
          datas[key].id = key; //因为键在野狗里像ID一样每个都不同,所以要创建一个id把每个key放进datas添加的Id,最后把对象放入数组中
          blogsArray.push(datas[key]);
        }
        console.log(blogsArray);
        this.blogs = blogsArray;
      });
  },
  computed: {
    filteredBlogs() {
      return this.blogs.filter(blog => {
        return blog.title.match(this.search);
      });
    }
  }
};
</script>
<style scoped>
#show-blog {
  max-width: 800px;
  margin: 0 auto;
}
.single-blog {
  padding: 20px;
  margin: 20px 0;
  box-sizing: border-box;
  background-color: #eee;
  border: 1px dotted #aaa;
}

input[type="text"] {
  width: 100%;
  padding: 10px 0;
}
a {
  color: #444;
  text-decoration: none;
}
</style>

